<template>
	<view class="my-container">
		<navbar title="个人中心" :show-back="false"/>
    <view class="user-info" v-if="isLogin">
      <view class="left flex">
        <image :src="userInfo.avatar || '/static/images/avatar.png'"/>
        <view class="name">
          <view>{{ userInfo.realname || '微信用户' }}</view>
          <view v-if="userInfo.phone">{{ $utils.phoneStar(userInfo.phone)}}</view>
        </view>
      </view>
      <navigator url="/pages/my/setting/index" class="right">
        <text class="iconfont icon-setting"/>
      </navigator>
    </view>
    <view class="user-info" v-else @click="toPage('/pages/login/index')">
      <view class="left flex">
        <image src="/static/images/avatar.png"/>
        <view class="name">
          <view>未登录</view>
        </view>
      </view>
    </view>
    <view class="p-28">
      <view class="card">
        <view class="cell" @click="toPage('/pages/my/cart/cart')">
          <view class="title"><text class="iconfont icon-wodeqingdanxuanzhong"/> 我的清单</view>
          <view class="value"><text class="iconfont icon-arrow"/></view>
        </view>
        <view class="cell" @click="toPage('/pages/my/order/order')">
          <view class="title"><text class="iconfont icon-wodeqingdanxuanzhong"/> 我的选材</view>
          <view class="value"><text class="iconfont icon-arrow"/></view>
        </view>
        <view class="cell" @click="toPage('/pages/my/collect/index')">
          <view class="title"><text class="iconfont icon-wodeshoucang"/>我的收藏</view>
          <view class="value"><text class="iconfont icon-arrow"/></view>
        </view>
        <view class="cell" @click="toPage('/pages/my/us')">
          <view class="title"><text class="iconfont icon-us"/>关于鼎钻</view>
          <view class="value"><text class="iconfont icon-arrow"/></view>
        </view>
      </view>
    </view>
    <tabbar/>
	</view>
</template>

<script>
	import {getUserInfo} from "@/api/my";
  import {mapGetters} from "vuex";
  export default {
		data() {
			return {
			};
		},
    computed: {
      ...mapGetters(['userInfo', 'isLogin'])
    },
    methods: {
      getInfo() {
        /*getUserInfo().then(res => {
          console.log(res);
        })*/
      },
      toPage(url) {
        const pages = ['/pages/my/cart/cart', '/pages/my/collect/index']
        if (pages.includes(url) && !this.isLogin) {
          this.$toast('请先登录', () => {
            uni.navigateTo({
              url: '/pages/login/index'
            });
          })
        } else {
          uni.navigateTo({
            url: url
          });
        }
      }
    },
    onShow() {
      this.getInfo();
    },
	}
</script>

<style lang="scss" scoped>
@import "@/static/styles/minix.scss";
.my-container {
  .user-info {
    @include flex-between;
    color: #fff;
    padding: 32rpx 28rpx;
    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .name {
      font-size: 32rpx;
      view:last-child {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
    .iconfont {
      font-size: 50rpx;
    }
    .unphone {
      font-size: 24rpx;
      color: #999;
      background-color: #f1f1f1;
      padding: 5rpx 10rpx;
      border-radius: 100rpx;
    }
  }
  .card {
    padding: 0 20rpx;
    .cell {
      @include flex-between;
      padding: 30rpx 0;
      border-bottom: 1px solid #f4f4f4;
      .title {
        .iconfont {
          margin-right: 10rpx;
          font-size: 32rpx;
        }
      }
      .value {
        .iconfont {
          color: $-color-muted;
        }
      }
    }
  }
}
</style>
